<template>
    <div class="content">
        <div
            v-for="item in list.data"
            :key="item.name"
            class="business"
        >
            <p class="business-name">
                <IconPro0 class="business-name-icon"/>
                <span>{{ item.name }}方向</span>
            </p>
            <ul class="product">
                <li
                    v-for="ite in item.children"
                    :key="getValue(ite, '产品名称')"
                    class="product-item"
                >
                    <p
                        class="product-name"
                        :title="getValue(ite, '产品名称')"
                    >
                        {{ getValue(ite, '产品名称') }}
                    </p>
                    <div class="product-logo">
                        <img
                            v-if="showIcon(item.name, ite)"
                            :src="getIconUrl(item.name, ite)"
                            :alt="getValue(ite, '产品名称')"
                        >
                    </div>
                    <div class="product-link">
                        <a
                            v-for="k in sortServe(ite)"
                            :key="k"
                            :href="getValue(ite, k)"
                            :title="getValue(ite, k)"
                            target="_blank"
                            class="product-serve"
                            :class="{'online': k === '线上环境'}"
                        >
                            {{ k }}
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
import list from '@/config/product.json';
import {getValue} from '@/utils';

const sortServe = (serve: Record<string, any>): string[] => {
    const keys = Object.keys(serve).filter(key => (key !== '方向' && key !== '产品名称'));
    const keyNumber: Record<string, number> = {
        '线上环境': 8,
        '测试环境': 4,
        '开发环境': 2,
    };
    return keys.sort((a: string, b: string) => {
        const numA = keyNumber[a] || 0;
        const numB = keyNumber[b] || 0;
        return numB - numA;
    });
};
const images = list.logo.map(item => item.slice(0, -4));
const showIcon = (direction: string, obj: Record<string, any>) => {
    return images.includes(direction) || images.includes(getValue(obj, '产品名称'));
};
const getIconUrl = (direction: string, obj: Record<string, any>) => {
    const logoName = images.includes(direction) ? direction : getValue(obj, '产品名称');
    return new URL(`/src/assets/logos/product/${logoName}.png`, import.meta.url).href;
};
</script>

<style lang="less" scoped>
@import (reference) url('assets/styles/common.less');
.content {
    .product {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 18px 24px;
        &-item {
            padding-bottom: 16px;
        }
        &-link {
            padding: 0 16px;
        }
        &-serve {
            color: @font-blue-color;
            font-size: @font-size-normal;
            line-height: 28px;
            display: block;
            &:hover {
                text-decoration: underline;
            }
            &.online {
                color: @font-green-color;
            }
        }
        &-logo {
            position: absolute;
            bottom: 16px;
            right: 16px;
            img {
                width: 80px;
                opacity: 0.1;
            }
        }
        &-name {
            width: 100%;
            padding: 5px 16px;
            margin-bottom: 10px;
            .text-ellipsis();
            font-size: @font-size-title;
            font-weight: bold;
            color: @const-white-color;
            background: linear-gradient(to right, @theme-color, @theme-light-color);

        }
    }
}
</style>
